<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/promise.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/webim.config.js"></script>
		<script type="text/javascript" src="js/strophe-1.2.8.min.js"></script>
		<script type="text/javascript" src="js/websdk-1.4.10.js"></script>

		<style type="text/css">
			.login-content *,
			.con-table * {
				margin: 0;
				padding: 0;
			}
			
			.add-message {
				position: relative;
				font-size: 16px;
				margin: 0 auto;
				left: -150px;
				width: 600px;
			}
			
			.add-message:after {
				content: ' ';
				display: block;
				clear: both;
			}
			
			.add-message .add-button {
				cursor: pointer;
				line-height: 32px;
				display: inline-block;
				float: right;
				border-radius: 5px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;
				-webkit-tap-highlight-color: transparent;
				padding: 3px 10px;
				margin-bottom: 10px;
			}
			
			.add-button img {
				height: 30px;
				vertical-align: middle;
				margin-top: -5px;
			}
			
			.con-table {
				position: relative;
				font-size: 16px;
				margin: 0 auto;
				left: -150px;
				width: 600px;
				background: #fff;
				border-radius: 5px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;
				-webkit-tap-highlight-color: transparent;
			}
			
			.login-content {
				padding-top: 200px;
				text-align: center;
			}
			
			.login-content input {
				width: 168px;
				height: 28px;
			}
			
			.login-content select {
				width: 172px;
				height: 28px;
			}
			
			.con-tr-head {
				text-align: center;
				line-height: 30px;
				background-color: #f0f0f0;
			}
			
			.con-tr {
				position: relative;
				width: 100%;
				display: block;
				border: 1px solid #CCCCCC;
				border-style: solid none none none;
			}
			
			.con-tr:hover {
				background-color: #F5F5F5;
			}
			
			.con-table .con-tr:nth-of-type(1) {
				border-style: none;
			}
			
			.con-tr:after {
				content: ' ';
				display: block;
				clear: both;
			}
			
			.con-td {
				min-width: 100px;
				height: 100px;
				float: left;
			}
			
			.con-td textarea {
				border: 1px solid #CCCCCC;
				border-style: none solid;
				padding: 5px;
				width: 100%;
				height: 100%;
				background-color: azure;
				line-height: 1.5;
				text-align: justify;
				text-justify: inter-word;
			}
			
			.con-tr-head .con-td {
				height: 30px;
			}
			
			.con-tr .con-td:nth-of-type(1) {
				text-align: center;
				width: 20%;
			}
			
			.con-tr .con-td:nth-of-type(2) {
				width: 60%;
			}
			
			.con-tr .con-td:nth-of-type(3) {
				text-align: center;
				width: 20%;
			}
			
			.con-table .con-tr,
			.con-td,
			.con-td textarea {
				resize: none;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
			}
			
			.dataStyle {
				font-style: italic;
				line-height: 100px;
			}
			
			.receivers {
				position: relative;
				line-height: 100px;
				cursor: pointer;
			}
			
			.receiverList {
				position: absolute;
				top: 0;
				right: -120px;
				width: 100px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;
				-webkit-tap-highlight-color: transparent;
				background: #fff;
			}
			
			.receiverList ul {
				list-style-type: none;
				padding: 10px;
			}
			
			.right-arrow {
				position: absolute;
				top: 45px;
				right: -13px;
			}
			
			.add-box {
				position: fixed;
				padding: 100px 50px;
				width: 600px;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				max-height: 600px;
				z-index: 99;
				background-color: white;
			}
			
			.sendToAll {
				padding-top: 200px;
				text-align: center;
			}
			
			#send-text {
				width: 500px;
				height: 300px;
				resize: none;
			}
			
			.doSendButton {
				position: relative;
				display: inline-block;
				color: #666;
				background-color: #EEE;
				border-color: #EEE;
				font-weight: 300;
				font-size: 16px;
				font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
				text-decoration: none;
				text-align: center;
				line-height: 40px;
				height: 40px;
				padding: 0 40px;
				margin: 0;
				display: inline-block;
				appearance: none;
				cursor: pointer;
				border: none;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-transition-property: all;
				transition-property: all;
				-webkit-transition-duration: .3s;
				transition-duration: .3s;
				background-color: #1B9AF7;
				border-color: #1B9AF7;
				color: #FFF;
				-webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
				box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
				border-radius: 4px;
			}
			
			.doSendButton:hover {
				background-color: #4cb0f9;
				border-color: #4cb0f9;
				color: #FFF;
			}
			
			.black-model {
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
				z-index: 9999;
				top: 0;
				left: 0;
				color: white;
				text-align: center;
				padding-top: 300px;
				font-size: 32px;
				display: none;
			}
		</style>
	</head>
	<!--crmManager-->

	<body style="background: #fafafa;margin: 0;padding: 0;font-family: Georgia;">

		<!--群发消息框START-->
		<div class="sendToAll" style="display: none;">请输入推送内容：</br>
			</br>
			<textarea id="send-text"></textarea></br>
			<div style="text-align:right;width: 500px;margin: 0 auto;">
				还可以输入<span style="font-size: 26px;color: #FF7F50;" id="counter">200</span>/200个字
			</div>
			</br>

			<div style="position: relative;width: 144px;margin: 0 auto;">
				<div class="popover fade top in" id="alert" style="display: none;">
					<div class="arrow"></div>
					<h3 class="popover-title">确定发送?</h3>
					<div class="popover-content text-center">
						<span class="left-yes doSendButton">是</span>
						<span class="right-no doSendButton">否</span>
					</div>
				</div>
			</div>
			<div class="doSendButton" id="doSendButton">
				推送给所有人
			</div>

			<div class="black-model" style=";">loading....</div>

			<script language="javascript">
			</script>

			<style type="text/css">
				.left-yes {
					width: 70px;
					padding: 1px 20px;
					float: left;
				}
				
				.right-no {
					background-color: #EEE !important;
					-webkit-box-shadow: 0 7px 0 #CCC, 0 8px 3px #CCC;
					box-shadow: 0 7px 0 #CCC, 0 8px 3px #CCC;
					width: 70px;
					color: #CCC;
					padding: 1px 20px;
					background-color: ;
					float: right;
				}
				
				.popover.top {
					margin-top: 55px;
				}
				
				.fade.in {
					opacity: 1;
				}
				
				.popover {
					text-align: center !important;
					color: #000000;
					position: absolute;
					width: 203px;
					top: -123px;
					left: -30px;
					z-index: 1010;
					display: none;
					max-width: 300px;
					padding: 1px;
					text-align: left;
					white-space: normal;
					background-color: #ffffff;
					border: 1px solid #ccc;
					border: 1px solid rgba(0, 0, 0, 0.2);
					-webkit-border-radius: 6px;
					-moz-border-radius: 6px;
					border-radius: 6px;
					-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
					-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
					box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
					-webkit-background-clip: padding-box;
					-moz-background-clip: padding;
					background-clip: padding-box;
				}
				
				.fade {
					opacity: 0;
					-webkit-transition: opacity 0.15s linear;
					-moz-transition: opacity 0.15s linear;
					-o-transition: opacity 0.15s linear;
					transition: opacity 0.15s linear;
				}
				
				.popover.top .arrow {
					bottom: -11px;
					left: 50%;
					margin-left: -11px;
					border-top-color: #999;
					border-top-color: rgba(0, 0, 0, 0.25);
					border-bottom-width: 0;
				}
				
				.popover .arrow {
					border-width: 11px;
				}
				
				.popover .arrow,
				.popover .arrow:after {
					position: absolute;
					display: block;
					width: 0;
					height: 0;
					border-color: transparent;
					border-style: solid;
				}
				
				.popover-title {
					padding: 8px 14px;
					margin: 0;
					font-size: 14px;
					font-weight: normal;
					line-height: 18px;
					background-color: #f7f7f7;
					border-bottom: 1px solid #ebebeb;
					-webkit-border-radius: 5px 5px 0 0;
					-moz-border-radius: 5px 5px 0 0;
					border-radius: 5px 5px 0 0;
					margin: 10px 0;
					font-family: inherit;
					font-weight: bold;
					line-height: 20px;
					color: inherit;
					text-rendering: optimizelegibility;
				}
				
				.popover-content {
					padding: 1px 14px 15px 14px;
				}
				
				.popover-content:after {
					content: " ";
					display: block;
					clear: both;
				}
				
				.popover.top .arrow:after {
					bottom: 1px;
					margin-left: -10px;
					border-top-color: #ffffff;
					border-bottom-width: 0;
				}
				
				.popover .arrow:after {
					border-width: 10px;
					content: "";
				}
				
				.popover .arrow,
				.popover .arrow:after {
					position: absolute;
					display: block;
					width: 0;
					height: 0;
					border-color: transparent;
					border-style: solid;
				}
				
				.text-center {
					text-align: center;
				}
				
				.btn-group {
					position: relative;
					display: inline-block;
					font-size: 0;
					white-space: nowrap;
					vertical-align: middle;
				}
			</style>
		</div>
		<!--群发消息框END-->

		<!--登录框START-->
		<div class="login-content">
			<h2>
				管理员登录系统
				</br></br></br></br></br></br>
			</h2>
			<p style="color: #7a7e80;">用户名：<input type="text" name="user" id="manager" value="" placeholder="请输入用户名" /></p>
			</br>
			<p style="color: #7a7e80;">密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="password" value="" /></p>
			</br>
			<p style="color: #7a7e80;">应&nbsp;&nbsp;&nbsp;&nbsp;用：
				<select id="selectApp">
					<option selected="selected" value="lxgh-lxhg#fingercrm">指尖CRM</option>
				</select>
			</p>
			</br>
			</br>
			<p>
				<div class="doSendButton" id="managerLogin">登录</div>
			</p>
		</div>
		<!--登录框END-->
		<script type="text/javascript" src="js/utils.js"></script>

		<script type="text/javascript">
			$('#chatBoxContent').hide();

			function watchTextArea() {
				var couArea = document.getElementById('counter');
				var textArea = document.getElementById('send-text');
				$('#send-text').on('input', function(e) {
					couArea.innerHTML = (200 - textArea.value.length) > 0 ? (200 - textArea.value.length) : 0;
					textArea.value = textArea.value.substring(0, 200);
				});
			}
			watchTextArea();
			$('#doSendButton').click(function() {
				$('#alert').show();
				$('.right-no').off('click').click(function() {
					$('#alert').hide();
				});
				$('.left-yes').off('click').click(function() {
					var textContent = $.trim($('#send-text').val());
					if(textContent && textContent != '') {
						$('.black-model').show();
						var userList = chatUtils.friends;
						var qumo = Math.ceil(userList.length / 5);
						var listBox = new Array(userList.length % 5);
						for(var i = 0; i < qumo; i++) {
							if(!listBox[i]) {
								listBox[i] = [];
							}
							for(var j = i * 5; userList[j] && j < 5 * (i + 1); j++) {
								listBox[i].push(userList[j]);
							}
						}
						for(var k = 0; k < listBox.length; k++) {
							doSend(listBox[k], k);
						}

						function doSend(tolist, k) {
							setTimeout(function() {
								for(var i = 0; i < tolist.length; i++) {
									var id = conn.getUniqueId(); // 生成本地消息id
									var msg = new WebIM.message('txt', id); // 创建文本消息
									msg.set({
										msg: textContent, // 消息内容
										to: tolist[i], // 接收消息对象（用户id）
										roomType: false,
										success: function(id, serverMsgId) {}
									});
									msg.body.chatType = 'singleChat';
									conn.send(msg.body);
								}
							}, (k * 1000 + 1500));
						}

						setTimeout(function() {
							$('.black-model').hide();
							alert('群发成功！');
						}, (listBox.length) * 1000 + 1500);

						$('#alert').hide();
					}
				});
			});
			
			$('#managerLogin').click(function() {
				var manager = $.trim($('#manager').val());
				var psd = $.trim($('#password').val());
				var selectApp = $.trim($('#selectApp').val());
				if(!manager || manager == '') {
					alert('请输入用户名');
					return;
				}
				if(!psd || psd == '') {
					alert('请输入密码');
					return;
				}
				var options = {
					apiUrl: WebIM.config.apiURL,
					user: manager,
					pwd: psd,
					appKey: selectApp,
					success: function(data) {
						//登录成功
						if(data.user.username == 'Manager') {
							$('.login-content').hide();
							$('.sendToAll').show();
						}
					},
					error: function(data) {
						alert('登录失败请重试');
					}
				};
				conn.open(options);
			});
		</script>

	</body>

</html>